import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { NavBar, Icon, DatePicker, Drawer, List, Card, WhiteSpace, Button } from 'antd-mobile'
import { withRouter } from 'react-router'
import { connect } from 'react-redux'
import './TitleNavBar.less'
import { mapStateToProps, mapDispatchToProps } from "../../actions/actionCreators.js"
const Item = List.Item;
let Overallstate, Overallthis;


class TitleNavBar extends Component {

    constructor(props) {
        super(props)
        this.state = {
            datePickerVisi: false,
            date: formatDate(new Date()),
            open: false,
            talentState: '',
            talantComcontent: ""
        }
    }
    componentWillReceiveProps(props) {
        this.setState({
            talentState: this.props.talentState,
            talantComcontent: this.props.titleData.content
        });
    }
    leftClick = () => {
        this.props.history.goBack();
    }

    rightClick = () => {

        this.setState({
            datePickerVisi: true
        });
    }
    rightClickhandle = () => {
        Overallstate = this.props;
        Overallthis = this;
        let sidebardom = document.getElementsByClassName("am-drawer-sidebar")[0];
        sidebardom.style.transform = 'translateX(0%)';
        sidebardom.style.transition = '.5s';
        this.setState({ open: !this.state.open });
    }
    onOpenChange = (...args) => {
        this.setState({ open: !this.state.open });
    }

    render() {
        let date = new Date();
        var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
        var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
        function formatTime(timestamp) {
            var date = new Date(timestamp);
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            var h = date.getHours() + ':';
            var m = date.getMinutes() + ':';
            var s = date.getSeconds();
            return Y + M + D;
        }
        const updatetalentStatepatams = {
            startTime: formatTime(firstDay),
            endTime: formatTime(lastDay),
            talentLevel: 1,
            status: 1,
            page: 1,
            pageSize: 10,
            queryValue:"",
            sortBy: "totalDiamonds",
            sortType: 1,
        }

        function levelhandle(levelnum, currentTarget) {
            let checkboxdom = currentTarget.parentNode.getElementsByTagName("input")[0];
            //levelcontainer
            if (!checkboxdom.checked) {
                removecheckedstatus("levelcontainer");
                currentTarget.classList.add("btnactive");
                Object.assign(updatetalentStatepatams, {
                    talentLevel: levelnum
                })
            } else {
                currentTarget.classList.remove("btnactive");
                Object.assign(updatetalentStatepatams, {
                    talentLevel: ""
                })
            }
        }
        function leftdatehandle(levelnum, currentTarget) {

            let checkboxdom = currentTarget.parentNode.getElementsByTagName("input")[0];
            if (!checkboxdom.checked) {
                removecheckedstatus("JoinRangecontainer")
                currentTarget.classList.add("btnactive");
                let date = new Date();
                let endTime = formatTime(date);
                let computedate = levelnum == "5Days" ? 5 : levelnum == "2Weeks" ? 14 :
                    levelnum == "3Weeks" ? 21 : '';
                let startTime = formatTime(new Date(date.getFullYear(), date.getMonth(), date.getDate() - computedate));
                Object.assign(updatetalentStatepatams, {
                    startTime: startTime,
                    endTime: endTime
                })
            } else {
                currentTarget.classList.remove("btnactive");
                Object.assign(updatetalentStatepatams, {
                    startTime: formatTime(firstDay),
                    endTime: formatTime(lastDay)
                })
            }
        }
        function statushandle(statuenum, eltarget) {
            let Statuscheckbox = document.getElementById("Statuscheckbox");
            if (!Statuscheckbox.checked) {
                eltarget.classList.add("btnactive");
                Object.assign(updatetalentStatepatams, {
                    status: statuenum
                })
            } else {
                eltarget.classList.remove("btnactive");
                Object.assign(updatetalentStatepatams, {
                    status: ""
                })
            }
        }
        function Orderhandle(ordertext, eltarget) {
            //Ordercontainer
            let checkboxdom = eltarget.parentNode.getElementsByTagName("input")[0];
            if (!checkboxdom.checked) {
                removecheckedstatus("Ordercontainer")
                eltarget.classList.add("btnactive");
                Object.assign(updatetalentStatepatams, {
                    sortBy: ordertext
                })
            } else {
                eltarget.classList.remove("btnactive");
                Object.assign(updatetalentStatepatams, {
                    sortBy: ""
                })
            }
        }
        function removecheckedstatus(container) {
            let JoinRangecontainer = document.getElementsByClassName(container)[0].getElementsByClassName("am-list-line")[0]
                .getElementsByClassName("am-list-content")[0].getElementsByTagName("label");
            for (let i = 0; i < JoinRangecontainer.length; i++) {
                let btndom = JoinRangecontainer[i].getElementsByClassName("am-button")[0];
                btndom.classList.remove("btnactive");
                JoinRangecontainer[i].getElementsByTagName("input")[0].checked = false;
            }
        }
        function confirmhandle() {
            console.log(updatetalentStatepatams);
            Overallstate.getTalent(updatetalentStatepatams);
            Overallthis.setState({ open: false });
        }
        const sidebar =(<div className="navbarcontainer">
            <NavBar
                mode='light'
                leftContent={[
                    <Icon key='1' type='left' />,
                    <span key='2' className='title'>back</span>
                ]}
                onLeftClick={this.leftClick}
            ></NavBar>
            <h3 style={{
                top: "30px",
                height: "40px",
                lineHeight: "40px",
                color: 'rgba(80, 80, 80, 1)',
                fontSize: '14px',
                position: "relative",
                backgroundColor: "#fff",
                textIndent: '1em'
            }}>Filter</h3>
            <List renderHeader={() => 'Join Date Range'} className="my-list" style={{
                position: "relative",
                top: "15px",
                backgroundColor: "#fff"
            }}>
                <Item className="JoinRangecontainer">
                    <label>
                        <Button type="primary" size="small" onClick={(e) => leftdatehandle("5Days", e.currentTarget)}>5 Days1
                </Button>
                        <input type="checkbox" style={{
                            display: "none"
                        }} />
                    </label>
                    <label>
                        <Button type="primary" size="small" onClick={(e) => leftdatehandle("2Weeks", e.currentTarget)}>2 Weeks
        
                </Button>
                        <input type="checkbox" style={{
                            display: "none"
                        }} />
                    </label>
                    <label>
                        <Button type="primary" size="small" onClick={(e) => leftdatehandle("3Weeks", e.currentTarget)}>3 Weeks
                </Button>
                        <input type="checkbox" style={{
                            display: "none"
                        }} />
                    </label>



                </Item>
            </List>
            <List renderHeader={() => 'Level'} className="my-list" style={{
                position: "relative",
                top: "15px",
                backgroundColor: "#fff"
            }}>
                <Item className="levelcontainer">
                    <label>
                        <Button

                            style={{
                                height: "45px"
                            }} icon={<img style={{
                                width: "37px",
                                height: "35px",
                                marginLeft: "28%",
                                marginTop: "2px",

                            }} src={require("../../../main/images/levelstar.png")} alt="" />} onClick={(e) => levelhandle(1, e.currentTarget)}></Button>
                        <input type="checkbox" style={{
                            display: "none"
                        }} />
                    </label>
                    <label>
                        <Button

                            style={{
                                height: "45px"
                            }} icon={<img style={{
                                width: "37px",
                                height: "35px",
                                marginLeft: "28%",
                                marginTop: "5px",

                            }} src={require("../../../main/images/levelDiamonds.png")} alt="" />} onClick={(e) => levelhandle(2, e.currentTarget)}></Button>
                        <input type="checkbox" style={{
                            display: "none"
                        }} />
                    </label>
                    <label>
                        <Button

                            style={{
                                height: "45px"
                            }} icon={<img style={{
                                width: "37px",
                                height: "35px",
                                marginLeft: "28%",
                                marginTop: "5px",

                            }} src={require("../../../main/images/levelking.png")} alt="" />} onClick={(e) => levelhandle(3, e.currentTarget)}></Button>
                        <input type="checkbox" style={{
                            display: "none"
                        }} />
                    </label>
                </Item>
            </List>
            <List renderHeader={() => 'Status'} className="my-list" style={{
                position: "relative",
                top: "15px",
                backgroundColor: "#fff"
            }}>
                <Item >
                    <label>
                        <Button type="primary" size="small" onClick={(e) => statushandle(1, e.currentTarget)}>Left</Button>
                        <input type="checkbox" id="Statuscheckbox" style={{
                            display: "none"
                        }} />
                    </label>
                </Item>
            </List>
            <List renderHeader={() => 'Order'} className="my-list" style={{
                position: "relative",
                top: "15px",
                backgroundColor: "#fff"
            }}>
                <Item className="Ordercontainer">
                    <label>
                        <Button type="primary" size="small" onClick={(e) => Orderhandle("totalDiamonds", e.currentTarget)}>Diamond</Button>
                        <input type="checkbox" style={{
                            display: "none"
                        }} />
                    </label>
                    <label>
                        <Button type="primary" size="small" onClick={(e) => Orderhandle("broadcastTime", e.currentTarget)}>Performance</Button>
                        <input type="checkbox" style={{
                            display: "none"
                        }} />
                    </label>
                    <label>
                        <Button type="primary" size="small" onClick={(e) => Orderhandle("newTime", e.currentTarget)}>Join Date</Button>
                        <input type="checkbox" style={{
                            display: "none"
                        }} />
                    </label>
                </Item>
            </List>
            <Button type="primary" onClick={() => confirmhandle()}>Confirm</Button>
        </div>);



        const dawerdom = this.props.Drawerstatus ? <Drawer
            className="my-drawer"
            ref="Drawercontainer"
            style={{
                height: document.documentElement.clientHeight,
                width: this.state.open ? document.documentElement.clientWidth : '0px',
                zIndex: 999,
            }}
            enableDragHandle
            contentStyle={{ color: '#A6A6A6', textAlign: 'center' }}
            sidebar={sidebar}
            open={this.state.open}
            position="right"
            onOpenChange={this.onOpenChange}
        >
        </Drawer> :<p></p>;
        return (
            <div style={{ height: '45px' }}>
                <NavBar
                    mode='light'
                    leftContent={[
                        <Icon key='1' type='left' />,
                        <span key='2' className='title'>{this.props.titleData.title}</span>
                    ]}
                    onLeftClick={this.leftClick}
                    rightContent={[
                        <div key='1' style={{ display: this.props.withDate ? '' : 'none' }}>
                            <Icon type='left' />
                            <span className='date' onClick={this.rightClick}>{this.state.date}</span>
                            <Icon type='right' />
                        </div>,
                        <div key='2' onClick={this.rightClickhandle}>{this.props.titleData.rightTitle}</div>
                    ]}
                >{this.props.titleData.centerTitle}</NavBar>
                <DatePicker
                    visible={this.state.datePickerVisi}
                    mode='date'
                    value={new Date(this.state.date.replace(new RegExp('-', 'g'), '/'))}
                    onChange={date => {
                        this.setState({ date: formatDate(date), datePickerVisi: false }, () => {
                            this.props.callback(this.state.date)
                        })
                    }}
                    maxDate={new Date()}
                    onDismiss={() => this.setState({ datePickerVisi: false })}>
                </DatePicker>
                {dawerdom}
            </div>
        );
    }
}

function formatDate(date) {
    return date.toLocaleDateString().replace(new RegExp('/', 'g'), '-')
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TitleNavBar))

